import { FC, useState, useEffect } from 'react';
import { Card, Table, Tag, Button } from 'antd';

interface ItemType {
  key: string;
  name: string;
  age: number;
  address: string;
}

const Index: FC = () => {
  const [dataSource, setDataSource] = useState<ItemType[]>([]);

  useEffect(() => {
    setTimeout(() => {
      setDataSource([
        {
          key: '1',
          name: '胡彦斌1',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖2',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '3',
          name: '胡彦祖3',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '4',
          name: '胡彦祖4',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '5',
          name: '胡彦祖5',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '6',
          name: '胡彦祖6',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '7',
          name: '胡彦祖7',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '8',
          name: '胡彦祖8',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '9',
          name: '胡彦祖9',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '10',
          name: '胡彦祖10',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '11',
          name: '胡彦祖11',
          age: 42,
          address: '西湖区湖底公园1号',
        },
        {
          key: '12',
          name: '胡彦祖12',
          age: 42,
          address: '西湖区湖底公园1号',
        },
      ]);
    }, 300);
  }, []);

  // 列信息
  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      render(text: string) {
        return <span style={{ color: 'blue' }}>{text}</span>;
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      render(text: string) {
        return <Tag>{text}</Tag>;
      },
    },
    {
      title: '住址',
      dataIndex: 'address',
    },
    {
      title: '操作',
      // dataIndex: 'key',
      // 第一个参数是text，匹配到的dataIndex的值
      // 第二个参数是record，表示整条记录
      render(_: string, record: ItemType) {
        return (
          <Button danger onClick={() => remove(record)}>
            删除
          </Button>
        );
      },
    },
  ];

  const remove = (record: ItemType) => {
    console.log(record);
  };

  return (
    <>
      <Card title="基础表格">
        {/* 表格会自带分页，默认把数据10条分成一页 */}
        <Table dataSource={dataSource} columns={columns} />
      </Card>
    </>
  );
};

export default Index;
